/* 首页的样式 */
/* 主体banner */
.banner{
    height:460px;
    /* background: #424242; */
}
 .banner .center {
     position: relative;
     box-shadow: 0 3px 20px rgba(0, 0, 0, 0.287);
     background:  rgba(105, 101, 101, 0.102);
}
.banner .center .nav-l{
    position: absolute;
    top:0;
    left:85px;
    width:243px;
    z-index: 1;
}
.banner .center .nav-l ul{
    color: #fff;
    background: rgba(105,101,101,.6);
    font-size: 14px;
    padding:20px 0;
}
.banner .center .nav-l li{
    display: flex;
    justify-content: space-between;
    padding:0 30px;
    height: 42px;
    line-height: 42px;
}
.banner .center .nav-l li:hover{
    background: #ff6700;
    color:#fff;
}
.banner .center .nav-l li a{
    color: #fff;
}
.banner  .center .ban-img{
    position: relative;
}
.banner  .center .ban-img img{
    margin-left: 85px;
    width:1226px;
}
.banner  .center .ban-img ul{
    position: absolute;
    bottom:20px;
    right:150px;
    z-index: 1;
}
.banner .center .ban-img li{
    width:10px;
    height:10px;
    border:1px solid red;
    background: #fff;
    text-align: center;
    float:left;
    margin-right: 4px;
    border-radius: 50%;
}
/* 列表区 */
.m-list{
    margin-top: 15px;
}
.m-list .center .server-l{
    padding-left: 80px;
    float:left;
}
.m-list .center .server-l ul{
    color: #424242;
    font-size: 14px;
    line-height: 82px;
    flex-wrap:nowrap;
    width:230px;
    padding:8px;
}
.m-list .center .server-l li{
    width:70px;
    height:82px;
    float:left;
}
.m-list .center .server-r{
    float: left;
    height: 200px;
    padding-left: 10px;
    background: #fff;
}
.m-list .server-r ul{
    width:100%;
}
.m-list .center .server-r li{
    float: left;
    margin-right: 15px;
    background-color: #ff6700;
}
.m-list .center .server-r li img{
    width:316px;
    height:170px;
}
.m-list .center .adv{
    margin-top: 22px;
}
.m-list .center .adv-li{
    padding-left: 80px;
}
.m-list .center .adv-li .a-t{
    line-height: 58px;
    height: 58px;
    margin-top: 20px;
}
.m-list .center .adv-li .a-t h4{
    margin: 0;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
    color: #333;
    float: left;
}
.m-list .center .adv-li .a-t a{
    float:right;
    font-size: 16px;
    line-height: 58px;
    color: #424242;
    -webkit-transition: all .4s;
    transition: all .4s;
}
.m-list .center .adv-li .a-t a:hover{
    color:orangered;
}
.m-list .center .adv-li .a-c{
    display: flex;
}
.m-list .center .adv-li .a-c .i-l{
    margin-right: 20px;
}
.m-list .center .adv-li .a-c .i-l img{
    width:236px;
    height: 614px;
}
.m-list .center .a-c .i-r{
    width:992px;
    background-color: #f6f6f6;
    margin-left:20px;
}
.m-list .center .a-c .i-r li:hover{
    cursor: pointer;
    transition: all .2s linear;
    background-color: #fff;
    box-shadow: 1px 0 20px #333;
}
.m-list .center .a-c .i-r li{
    padding:20px 0;
    text-align: center;
    margin-right: 14px;
    background-color: #fff;
    width:234px;
    margin-bottom: 10px;
    float: left;
} 
.m-list .center .a-c .i-r img{
    width:160px;
    height: 160px;
}
.m-list .center .a-c .i-r .name{
    font-size: 14px;
    font-weight: 400;
    color: #333;
    margin-bottom: 10px;
}
.m-list .center .a-c .i-r .expo{
    height: 18px;
    font-size: 12px;
    color: #b0b0b0
}
.m-list .center .i-r .price{
    padding:10px 0px;
    color: #ff6700;
}
/* 侧边导航 */
.sider{
    text-align: center;
    position: fixed;
    top:250px;
    right:0px;
    width:80px;
    line-height: 50px;
    border: 2px solid #424242;
    border-right: 0;
}
.sider ul li{
    padding: 10px 0;
    height:30px;
    color: #424242;
    font-size: 14px;
}
.sider ul li:hover{
    color: orangered;
}